<template>
	<view class="yue">
		<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
		<view class="yue-top">
		    <view class="yue-left" @click="switchTab('closed')">
		        <view class="">未核销</view>
		        <view v-show="border == 'closed'" class="border"></view>
		    </view>
		    <view class="yue-left" @click="switchTab('verified')">
		        <view class="">已核销</view>
		        <view v-show="border == 'verified'" class="border"></view>
		    </view>
		</view>
	
		
			<view class="box-yue1">
			   <uni-collapse ref="collapse">
				<uni-collapse-item open="true" :title="`订单编号：${item.order_sn}`" v-for="item in list">
					<view class="content">
						<view class="title">
							<view class="text">订单金额：{{item.order_amount}}元</view>
							<view class="text">实付金额：{{item.pay_fee}}元</view>
						</view>
						<view class="title">
							<view class="text">下单用户：{{item.user.nickname}}</view>
						</view>
						<view class="text">商品列表</view>
						<view class="text" v-for="i in item.items">
							<view class="title">
								<view class="">商品名称:{{i.goods_title}}</view>
								<view class="">数量:{{i.goods_num}}</view>
							</view>
							<view class="title">
								<view class="">规格:{{i.goods_sku_text}}</view>
								<view class="">让利幅度:{{i.goods_range}}%</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			   </uni-collapse>
			</view>
		</scroll-view>
	</view>
   
	
</template>

<script setup>
	import { user,shopOrderIndex } from '@/api/index.js';
	import { utils } from '@/utils/utils.js';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';

const list = ref([])
const page = ref(0)
const last_page = ref(1)
const border = ref('closed'); //0未核销 1已核销
onShow(() => {
    order('closed'); //获取用户信息
});
const switchTab = (value) => {
    border.value = value;
	list.value = []
	page.value = 0
	last_page.value =1
	order(value)
};
const order = async (status) => {
	if(page.value>=last_page.value){
		return false
	}
	page.value++
    const ret = await shopOrderIndex({page:page.value});
    if (ret.code == 1) {
		let data = ret.data.data
		let d = []
        
		for(let a=0;a<data.length;a++){
			console.log(data[a].status)
			if(data[a].status == status){
				console.log(data[a])
				d.push(data[a])
			}
		}
		page.value = ret.data.current_page
		last_page.value = ret.data.last_page
		list.value = d
        console.log('订单', list.value);
    } else {
        utils('数据加载失败！');
    }
};
const scrolltolower = () => {
    // console.log('滚动到底部');
	order(border.value)
};
</script>

<style lang="scss" scoped>
.scroll-view {
    .top {
        height: 20rpx;
        background-color: #f5f5f5;
    }
    .lists {
        .right {
            .sj {
                margin-top: 5rpx;
                font-size: 28rpx;
                color: #6f6f6f;
            }
            font-size: 32rpx;
        }
        .parit {
            width: 78rpx;
            height: 78rpx;
            border-radius: 50%;
            margin-right: 18rpx;
        }
        .money {
            color: #f8bb4f;
            font-size: 40rpx;
            margin-right: 32rpx;
        }
        .flex {
            display: flex;
            align-items: center;
        }
        height: 160rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 38rpx 0 38rpx 32rpx;
        border-bottom: solid 2rpx #eae9e9;
    }
    height: 100vh;
}
.yue {
    .box-yue1 {
        .box-list1 {
            .list1-right1 {
                font-size: 28rpx;
                color: #f8bb4f;
            }
            .list1-right {
                color: #f8bb4f;
                font-size: 48rpx;
            }
            .sj {
                color: #999999;
                font-size: 24rpx;
                margin-top: 16rpx;
            }
            &:last-child {
                border: none;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 152rpx;
            border-bottom: solid #f5f5f5 2rpx;
            color: #333333;
            font-size: 28rpx;
        }
        padding: 0 38rpx 0 34rpx;
    }
    .yue-top {
        .yue-left {
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
            .border {
                width: 40rpx;
                height: 4rpx;
                background: #ff9b29;
                margin-top: 3px;
            }
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        padding: 0 144rpx;
        border-bottom: solid 20rpx #f7f7f7;
    }
}
.content{
	box-sizing: border-box;
	padding:0 20rpx 20rpx 20rpx;
	.title{
		display: flex;
		justify-content: space-between;
	}
}
</style>
